<template>
  <section class="app-container">
    <!-- 通知和搜索 -->
    <div>
      <div class="van-search" style="background: #dddddd">
        <img :src="newlogo" alt="" style="width: 23%; height: 1.3rem" />
        <div class="van-search__content van-search__content--round">
          <div class="van-cell van-cell--borderless van-field">
            <div class="van-field__left-icon">
              <i
                class="van-icon van-icon-search"
                style="height: 1.1rem; color: #686869"
              ></i>
            </div>
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input
                  ref="inpt"
                  v-model="sch"
                  style="font-size: 14px"
                  type="search"
                  placeholder="输入产品名称"
                  class="van-field__control"
                  @search="onsearch()"
                  @input="jujao()"
                />
              </div>
            </div>
            <div
              class="van-field__left-icon"
              @click="resrch()"
              v-show="wordsly"
            >
              <i
                class=""
                style="
                  height: 1.1rem;
                  color: #686869;
                  font-size: 15px;
                  font-weight: bold;
                "
              >
                ╳</i
              >
            </div>
          </div>
        </div>
        <span @click="redirectTo('/order')" style="margin-left: 2%">
          &nbsp;
          <!-- <van-icon name="cart" size="22" color="#1d5ae8" /> -->
        </span>
      </div>
    </div>

    <!--广告轮播区-->
    <article class="adrotation">
      <van-swipe :autoplay="3000" indicator-color="white" class="banner">
        <van-swipe-item
          v-for="(banner, index) in bannerList"
          :key="index"
          style="height: 150px; text-align: center"
        >
          <img
            :src="banner.image"
            style="width: 100%; height: 150px; object-fit: contain"
          />
        </van-swipe-item>
      </van-swipe>
    </article>
    <!--类别区-->
    <!-- <section class="servicetype">
      <div class="cards">
        <nav>
          <a v-text="servicetype.navList[0]"></a>
        </nav>
        <div
          style="
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: start;
            align-content: center;
          "
        >
          <div
            style="
              width: 25%;
              padding: 5px;
              text-align: center;
              overflow-x: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
            v-for="item in servicetype.ulList"
            :key="item.id"
            @click="handleChangeType(item.id)"
          >
            <div style="margin: 10px 0px 0 0">
              <img
                :src="item.image ? item.image : defaultIcon"
                width="60rem"
                height="60rem"
              />
            </div>
            <div
              v-text="item.name"
              style="font-size: 13px; text-align: center"
            ></div>
          </div>
        </div>
      </div>
    </section> -->
    <!--列表导航区-->
    <nav>
      <van-row class="menu-container" gutter="10">
        <van-col span="7">
          <van-dropdown-menu style="margin-left: -5px" active-color="#EE3F00">
            <van-dropdown-item
              :title="localaddress"
              class="select_area"
              ref="area_item"
            >
              <van-area
                columns-num="2"
                :area-list="areaList"
                @confirm="addConfirm"
                @cancel="hideAreaItem"
                :value="area_code"
              />
            </van-dropdown-item>
          </van-dropdown-menu>
        </van-col>
        <van-col span="7">
          <van-dropdown-menu style="margin: auto" active-color="#EE3F00">
            <van-dropdown-item
              v-model="option"
              :options="options"
              @change="handleChange(1)"
            />
          </van-dropdown-menu>
        </van-col>

        <van-col span="7">
          <van-dropdown-menu style="margin: auto" active-color="#EE3F00">
            <van-dropdown-item
              v-model="option1"
              :options="options1"
              @change="handleChange(4)"
            />
          </van-dropdown-menu>
        </van-col>
      </van-row>
    </nav>
    <div style="width: 100%; background: #f2f1f6; padding-bottom: 10px">
      <ul style="display: flex; flex-wrap: wrap; width: 90%; margin: auto">
        <li
          v-for="(item, value) in typelist"
          :key="value"
          style="width: 23%; margin-top: 7px"
          :style="value != 0 && value != 4 ? 'margin-left:7px' : null"
          @click="shaohuo(item.id)"
        >
          <img :src="item.iconUrl" alt="" style="width: 100%" />
        </li>
      </ul>
    </div>
    <!--展示区-->
    <main>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul
          class="ulda"
          v-for="item in list"
          :key="item.id"
          @click="redirectTo(`/raw/material-detail?id=${item.id}`)"
        >
          <li>
            <div class="top">
              <aside
                class="left"
                :style="{
                  backgroundImage: `url(${item.gallery[0]})`,
                }"
              ></aside>
              <ul class="right">
                <li class="kzs">
                  <p>{{ item.name }}</p>
                </li>
                <li>
                  <p style="margin: 7px 0">
                    <van-tag
                      v-for="(i, index) in item.keywords"
                      :key="index"
                      :class="index != 0 ? 'tag-blue' : 'tag-bluer'"
                    >
                      {{ i }}
                    </van-tag>
                  </p>
                </li>
                <li style="color: #f70707; font-weight: 600; font-size: 16px">
                  <span
                    >￥<span style="">{{ item.retailPrice }}</span></span
                  >
                </li>
                <li style="margin-top: 4px; font-size: 12px">
                  <a style="display: flex; align-items: center">
                    <span
                      style="
                        color: rgb(150, 151, 153);
                        display: inline-block;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        max-width: 52%;
                      "
                      >{{ item.shopname }}</span
                    >
                    <span class="toshop">进店</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="bottom">
              <!-- <span
              >其他描述:&nbsp;&nbsp;{{ item.brief.substring(0, 20)
              }}{{ strlen(item.brief) > 20 ? '...' : '' }}</span
            > -->
            </div>
          </li>
          <li>
            <div class="divider"></div>
          </li>
        </ul>
      </van-list>
    </main>
  </section>
</template>
<script>
import {
  Tag,
  Card,
  Row,
  Col,
  List,
  Search,
  Button,
  DropdownMenu,
  DropdownItem,
  Popup,
  Area,
  Icon,
  Divider,
  Swipe,
  SwipeItem,
  Notify,
  Field,
  Toast,
} from 'vant';
import areaList from '@/views/user/module-address-edit/area_all.json';
import newlogo from '@/assets/images/newlogo.png';
import {
  getMerchantList,
  getContractDicItem,
  getWxConfig,
  voildteHasWatched,
  getRawRotationList,
  getRawCategoryList,
  getRawBrandList,
  getRawGoodList,
} from '@/api/api';
import defaultIcon from '@/assets/images/merchant/service_default_icon.png';
import logo_default from '@/assets/images/logo.jpg';
export default {
  name: '',
  props: {},
  data() {
    return {
      wordsly: false,
      loading: false,
      finished: false,
      logo_default: logo_default,
      sch: '',
      newlogo: newlogo,
      title: '平台提示:展示信息由用户发布查看,合作前请审核信息真实性。',
      localaddress: '服务区域',
      areaList: areaList,
      name: '', //商品名称
      minAmount: '', //最低价格
      maxAmount: '', //最高价格
      bannerList: [],
      area_code: '',
      defaultIcon: defaultIcon,
      option: 0,
      options: [
        {
          text: '品牌选择',
          value: 0,
        },
      ],
      option1: 0,
      options1: [
        {
          text: '选择种类',
          value: 0,
        },
      ],
      list: [],
      typelist: '',
      isiphoe: false,
      setkeyword: new Map(),
      keyword: new Map(),
      query: {
        name: undefined,
        address: undefined,
        categoryId: undefined,
        brandId: undefined,
        shopId: undefined,
        minAmount: undefined,
        maxAmount: undefined,
        page: 0,
        limit: 10,
        modular: 1,
        salesVolume: undefined,
      },
    };
  },
  created() {
    this.init();
    // this.setwr();
  },
  computed: {},
  methods: {
    jujao() {
      if (this.sch != '') {
        this.wordsly = true;
      } else {
        this.wordsly = false;
      }
    },
    resrch() {
      this.sch = '';
      this.wordsly = false;
      this.list = [];
      this.query.page = 0;
      this.query.name = this.sch;
      this.onLoad();
    },
    addConfirm(value) {
      if (value[1].name == '全国地区') {
        this.query.address = '';
        this.localaddress = '服务区域';
        this.$refs.area_item.toggle();
        this.list = [];
        this.query.page = 0;
        this.onLoad();
        return;
      }
      this.localaddress = value[1].name;
      this.query.address = value[1].name;
      this.$refs.area_item.toggle();
      this.list = [];
      this.query.page = 0;
      this.onLoad();
    },
    hideAreaItem() {},
    onsearch() {
      let ipt = this.$refs.inpt;
      ipt.blur();
      let txt = new RegExp('[\u4e00-\u9fa5]+');
      if (!txt.test(this.sch)) {
        Toast('请输入正确的产品名称');
        return;
      }
      this.list = [];
      this.query.page = 0;
      this.query.name = this.sch;
      this.onLoad();
    },
    // async setwr() {
    //   let u = navigator.userAgent;
    //   if (
    //     u.indexOf('iPhone') > -1 ||
    //     u.indexOf('Windows Phone') > -1 ||
    //     u.indexOf('iPad') > -1
    //   ) {
    //     this.isiphoe = true;
    //   }

    //   await getContractDicItem({})
    //     .then((res) => {
    //       const gonzhong = res.data.data.gozong;
    //       gonzhong.forEach((ite) => {
    //         this.setkeyword.set(ite.itemValue, ite.itemName);
    //       });
    //     })
    //     .then(() => {
    //       this.onLoad();
    //     });
    // },

    // 获取原料商品列表数据
    onLoad() {
      this.query.page++;

      getRawGoodList(this.query)
        .then((res) => {
          let lst = res.data.data.list;
          this.list.push(...lst);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;

          lst.forEach((it) => {
            let keywords = [];
            let arrkey = it.keywords.split(',');
            if (it.keywords) {
              arrkey.forEach((ite) => {
                // if (this.setkeyword.get(ite)) {
                keywords.push(ite);
                // }
              });
            }
            it['keywords'] = keywords;
          });

          let obj = {};
        })
        .catch((res) => {
          console.log(res.data);
        });
      // .then((_) => {
      //   //重置查询条件
      //   for (const key in this.query) {
      //     if (Object.hasOwnProperty.call(this.query, key)) {
      //       this.query[key] = undefined;
      //     }
      //   }
      //   this.query['page'] = 1;
      //   this.query['limit'] = 10 * 10000;
      // });
    },

    init() {
      //获取品牌列表
      getRawBrandList().then((res) => {
        let list = res.data.data || [];

        let obj;
        list.forEach((item) => {
          obj = {};
          obj['text'] = item.name;
          obj['value'] = item.id;
          this.options.push(obj);
        });
      });
      this.getBannerList();
      this.getServicetypeList();
      // this.onLoad();
    },

    //获取轮播图数据
    getBannerList() {
      getRawRotationList().then((res) => {
        this.bannerList = res.data.data;
      });
    },
    //获取服务类型数据
    getServicetypeList() {
      getRawCategoryList().then((res) => {
        let list = res.data.data;
        this.typelist = res.data.data;

        let obj;
        list.forEach((itm) => {
          obj = {};
          obj['text'] = itm.name;
          obj['value'] = itm.id;
          this.options1.push(obj);
        });
      });
    },
    // 通过ascall控制字数
    strlen(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    redirectTo(link) {
      this.$router.push({
        path: link,
      });
    },
    handleChange(key) {
      if (key == 1) {
        if (this.option == 0) {
          this.query.brandId = '';
          this.query.page = 0;
          this.list = [];
          this.onLoad();
          return;
        }
        this.query.brandId = this.option;
      }
      if (key == 4) {
        if (this.option1 == 0) {
          this.query.categoryId = '';
          this.query.page = 0;
          this.list = [];
          this.onLoad();
          return;
        }

        this.query.categoryId = this.option1;
      }
      this.list = [];
      this.query.page = 0;
      this.onLoad();
    },
    shaohuo(id) {
      this.option1 = id;
      this.query.categoryId = id;
      this.query.page = 0;
      this.list = [];
      this.onLoad();
    },
    handleChangeType(key) {
      this.query['categoryId'] = key;
      this.query.page = 0;
      this.list = [];
      this.onLoad();
    },
  },
  components: {
    [Row.name]: Row,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Search.name]: Search,
    [Button.name]: Button,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Icon.name]: Icon,
    [List.name]: List,
    [Divider.name]: Divider,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Card.name]: Card,
    [Field.name]: Field,
  },
};
</script>
<style lang='scss' scoped>
.toshop {
  margin-left: 3px;
}

.toshop::after {
  // after和befor都需要content来充当容器，若没有容器，啥都没有
  content: '';
  display: inline-block;
  margin-left: 2px;
  margin-bottom: 0.5px;
  width: 7px;
  height: 7px;
  border-left: 0px !important;
  border-bottom: none !important;
  transform: rotate(45deg);
  border: 1px solid black;
}
.kzs {
  width: 80%;

  p {
    width: 100%;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.tag-blue {
  margin-left: 3px;
}
.tag-bluer {
  background: rgba(29, 90, 232, 0.1) !important;
  color: #1d5ae8 !important;
}
.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}

.van-search__content {
  border-radius: 0px !important;
  background: #dddddd !important;
}

.van-search,
.van-search__content {
  background: #f2f1f6 !important;
  //padding: 0.75rem 4%;
}

.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}
.app-container {
  padding-bottom: 0px;
  background: white;
  overflow-x: hidden;

  > .title-container {
    //display: flex;
    margin: 10px 16px;
    padding: 5px 0px;
    background: #f7f8fa;
    text-align: center;
    // align-items: center;
    // justify-content: center;

    > span {
      color: rgba(245, 140, 108, 1);
      font-weight: bold;
      font-size: 10px;
    }
  }

  > ul.serach-container {
    width: 85%;
    height: 30px;
    padding: 0 16px;
    display: flex;
    margin-bottom: 12px;
    font-size: 15px;

    li:nth-of-type(2) {
      flex: 1;

      .van-search {
        padding: 0 12px;
        height: 100%;
        background-color: transparent !important;
        padding: 0 0px;

        .van-search__content {
          align-items: center;
          height: 100%;
          flex: 1;
          padding-left: 8px;
          background-color: transparent;
          border: 1px solid #f94707;
          box-sizing: border-box;
        }

        /deep/.van-field__control {
          font-size: 14px;
        }
      }
    }

    li:nth-of-type(3) {
      border: 1px solid #f94707;
      width: 80px;
      box-sizing: border-box;
      border-left-width: 0px;
      align-items: center;
      justify-content: center;
      display: flex;
      background: #f94707;

      > span {
        color: white;
        //font-size: 16px;
      }
    }
  }

  > .adrotation {
    // height: 100px;
    padding: 0 0;
    // max-height: 25%;
    //min-height: 15%;

    //transform: translateY(-70%);
    .van-swipe {
      width: 100% !important;
      background: #f1f0f5 !important;
      //border-radius: 10px;
    }

    .van-swipe-item img {
      width: 100% !important;
      // height: 100%;
    }
  }

  > .servicetype {
    //margin-top: -100px;
    background-color: rgb(255, 255, 255);

    li,
    li a {
      cursor: pointer;
    }

    .cards {
      nav {
        display: flex;
        height: 30px;
        align-items: flex-end;
        padding: 0 16px;
        margin: 6px 0;

        a {
          display: block;
          margin-right: 20px;
          color: #5b5b5b;
          font-weight: bold;
        }
      }
    }
  }

  > nav {
    padding: 10px 0px;
    background: #f2f1f6;

    .menu-container {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;

      .van-col {
        /deep/.van-dropdown-menu__bar {
          height: auto;
          border-radius: 4px !important;

          .van-dropdown-menu__title {
            border-radius: 4px !important;

            background-color: rgb(255, 255, 255);
            display: block;
            padding: 0 8px 0 0px;
            font-size: inherit;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
          }

          .van-dropdown-menu__title::after {
            border-color: transparent transparent rgba(0, 0, 0, 1)
              rgba(0, 0, 0, 1);
            right: 9px;
          }
        }

        /deep/.van-ellipsis {
          line-height: 30px;
          color: rgba(0, 0, 0, 1);
          text-align: center;
        }

        a {
          > span {
            height: 30px;
            color: hsl(0, 0, 80);
            display: flex;
            align-items: center;
            background: white;
            border: 1px solid hsl(0, 0, 80);
          }
        }

        .my-input {
          padding: 0 5px;
          height: 30px;
          line-height: 30px;
          border: 1px solid #cccccc;
          width: 90%;
          margin: 0 auto;
          font-size: 11px;
        }
      }
    }
  }

  > main {
    .ulda {
      margin: 10px 0;

      > li:nth-of-type(1) {
        padding: 0 16px;

        .top {
          height: 100px;
          display: flex;

          .left {
            //background-color: #1E7BF4;
            background-size: 100% 100%;
            width: 100px;
            height: 100px;
            min-height: 100px;
            min-width: 100px;
            background-repeat: no-repeat;
            box-sizing: border-box;
            //box-shadow: 2.5px 2.5px 5px;
            border-radius: 8px;
          }

          .right {
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            width: 80%;
            flex: 1;
            justify-content: space-around;
            > li:nth-of-type(1) {
              // flex: 1;

              color: black;
              font-weight: bolder;
            }

            > li:nth-of-type(2) {
              align-items: center;
              display: flex;

              > span {
                color: red;

                > span {
                  font-size: 16px;
                }
              }
            }

            > li:nth-of-type(3) {
              display: flex;
              overflow: hidden;
              align-items: center;
              width: 100%;

              > a {
                display: flex;
                align-items: center;
                height: 20px;
                padding: 0 6px;
                border: 1px solid #71c5fa;
                color: #71c5fa;
                align-items: center;
                justify-content: center;
                //min-width: 30%;
                //max-width: 50%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding: 0 6px 2px 6px;
                font-size: 11px;
              }

              > a:not(:nth-of-type(1)) {
                margin: 0 auto 0 10px;
              }
            }
          }
        }

        .bottom {
          padding: 10px 0;
          display: flex;
          align-items: center;

          > span {
            font-size: 12px;
            color: rgb(136, 136, 136);
          }
        }
      }

      > li:nth-of-type(2) {
        /**分割快 */
        > .divider {
          display: block;
          width: 100%;
          height: 5px;
          min-width: 50px;
          margin: 0 auto;
          background-color: rgba(242, 242, 242, 1);
        }
      }
    }
  }
}
</style>
